<template>
  <div class="icon-container">
    <a-tabs v-model:activeKey="activeKey">
      <a-tab-pane
        :key="iconType.value"
        :tab="iconType.label"
        v-for="iconType in iconMaps"
      >
        <a-flex wrap="wrap" :gap="20">
          <div v-for="icon in ICONMaps" :key="icon">
            <a-tooltip :title="icon">
              <component
                :is="icon"
                :name="icon"
                class="icon-item"
                @click="Copy(icon)"
              />
            </a-tooltip>
          </div>
        </a-flex>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>
  <script setup>
import { ref, defineEmits, defineProps, computed } from "vue";
import { message } from "ant-design-vue";
import { systemIconMaps } from "@/utils/iconMaps";
const emit = defineEmits(["copy", "click"]);
const props = defineProps({
  value: {
    type: String,
    default: "",
  },
  //  是否复制
  copy: {
    type: Boolean,
    default: false,
  },
});

const iconMaps = [
  {
    label: "系统icon",
    value: "system",
  },
];
const activeKey = ref("system");

// 过滤
const ICONMaps = computed(() => {
  return systemIconMaps.filter((item) => item.includes(props.value));
});

const Copy = (text) => {
  if (!props.copy) {
    if (text !== props.value) {
      emit("click", text);
    }
    return;
  }
  const input = document.createElement("input");
  input.value = text;
  document.body.appendChild(input);
  input.select();
  document.execCommand("Copy");
  document.body.removeChild(input);
  message.success("复制成功:" + text);
  emit("click", text);
};
</script>

<style lang='scss' scoped>
.icon-container {
  width: inherit;
  .icon-item {
    font-size: 30px;
  }
  :deep(.ant-tabs-content-holder) {
    overflow: auto;
    max-height: inherit;
    height: inherit;
  }
}
</style>